<template>
	<view v-if="load">
		<view class="detail-head" :style="info.status != 3 ? 'background-image: url(https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/detail-bg.png);' : 'background-image: url(https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/detail-bg1.png);'" >
			<view class="detail-head-top" >
				<view class="detail-head-left" >
					<view class="detail-head-head">
						<image src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/detail1.png" mode="widthFix" class="bx-icons" ></image>
						<view class="detail-head-head-title" >
							<text>{{info.bx_name}}</text>
							<text class="detail-head-head-title-yellow">·{{info.bx_type_name}}</text>
						</view>
					</view>
					<view class="detail-head-no" >保险单号：{{info.bd_no}}</view>
					<view class="detail-head-memo">{{info.bx_memo}}</view>
				</view>
				<image v-if="info.status == 2" src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/detail2.png" mode="widthFix" class="detail-head-state"></image>
				<image v-if="info.status == 1" src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/detail3.png" mode="widthFix" class="detail-head-state"></image>
				<image v-if="info.status == 3" src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/detail4.png" mode="widthFix" class="detail-head-state"></image>
			</view>
			<view class="play-dz-bd" v-if="info.bd_url" @tap="toBd(info.bd_url)">电子保单</view>
			<view class="detail-head-footer" >
				<view @tap="changeShow(1)" :class="show == 1 ? 'detail-head-footer-item active' : 'detail-head-footer-item' " >保单详情</view>
				<view @tap="changeShow(2)" :class="show == 2 ? 'detail-head-footer-item active' : 'detail-head-footer-item' ">保单内容</view>
			</view>
			<image :style="{
				left : (((show - 1) * 375) + ((375 / 2) - (26 / 2)) )+'upx'
			}" src="https://jy-vote.oss-cn-hangzhou.aliyuncs.com/order-icon.png" mode="widthFix" class="order-footer-icon" ></image>
		</view>
		<view v-if="show == 1" >
			<view class="form-body" >
				<view class="form-title" >
					<view class="form-title-line" ></view>
					<view class="form-title-txt">投保信息</view>
				</view>
				<view class="form-title" >
					<view class="form-label confirm-label">保障方案</view>
					<view class="form-content confirm-orange" >{{info.fanan_memo}}</view>
				</view>
				<view class="form-title" >
					<view class="form-label confirm-label">生效日期</view>
					<view class="form-content" >{{info.start_time}}</view>
				</view>
				<view class="form-title" >
					<view class="form-label confirm-label">失效日期</view>
					<view class="form-content" >{{info.end_time}}</view>
				</view>
				<view class="form-title" >
					<view class="form-title-line" ></view>
					<view class="form-title-txt">投保企业</view>
				</view>
				<view class="form-title" >
					<view class="form-label confirm-label">企业名称</view>
					<view class="form-content" >{{info.insure.name}}</view>
				</view>
				<view class="form-title" >
					<view class="form-label confirm-label">统一信用编码</view>
					<view class="form-content" >{{info.insure.client}}</view>
				</view>
				<view class="form-title" >
					<view class="form-label confirm-label">联系人</view>
					<view class="form-content" >{{info.insure.contact}}</view>
				</view>
				<view class="form-title" >
					<view class="form-label confirm-label">联系人手机号</view>
					<view class="form-content" >{{info.insure.contact_mobile}}</view>
				</view>
				<!-- <view class="form-title" >
					<view class="form-label confirm-label">所在地区</view>
					<view class="form-content" >{{info.insure.province}}{{info.insure.city}}{{info.insure.area}}</view>
				</view> -->
				<view class="form-title" >
					<view class="form-label confirm-label">详细地址</view>
					<view class="form-content" >{{info.insure.address}}</view>
				</view>
				<view v-for="(item,key) in info.open_arr" :key="'key'+key">
					<view class="form-title" >
						<view class="form-title-line" ></view>
						<view class="form-title-txt">被保企业{{key + 1}}</view>
					</view>
					<view class="form-title" >
						<view class="form-label confirm-label">企业名称</view>
						<view class="form-content" >{{item.name}}</view>
					</view>
					<view class="form-title" >
						<view class="form-label confirm-label">统一信用编码</view>
						<view class="form-content" >{{item.client}}</view>
					</view>
					<!-- <view class="form-title" >
						<view class="form-label confirm-label">联系人</view>
						<view class="form-content" >{{item.contact}}</view>
					</view>
					<view class="form-title" >
						<view class="form-label confirm-label">联系人手机号</view>
						<view class="form-content" >{{item.contact_mobile}}</view>
					</view>
					<view class="form-title" >
						<view class="form-label confirm-label">办公地址</view>
						<view class="form-content" >{{item.address}}</view>
					</view> -->
				</view>
				<view class="form-title" v-if="info.bx_id != 9">
					<view class="form-title-line" ></view>
					<view class="form-title-txt">投保人员</view>
					<view class="form-title-flex" ></view>
					<view class="detail-person-detail" @tap="toPersion()" >详情 ></view>
				</view>
				<view class="form-title" v-if="info.bx_id == 9">
					<view class="form-title-line" ></view>
					<view class="form-title-txt">充电桩清单</view>
					<view class="form-title-flex" ></view>
					<view class="detail-person-detail" @tap="toPersion()" >详情 ></view>
				</view>
				<view class="detail-pesion-box">
					<view v-for="(item,index) in info.user" :key="'pe'+index" class="detail-pesion" >
						<view>{{item.name}}</view>
						<view class="detail-pesion-idcard">{{item.id_card}}</view>
					</view>
				</view>
				<view class="form-title" >
					<view class="form-title-line" ></view>
					<view class="form-title-txt">批单</view>
					<view class="form-title-flex" ></view>
					<!-- <view class="detail-person-detail" @tap="toPersion()" >详情 ></view> -->
				</view>
				<view class="detail-change-box">
					<view :class="index%2 == 1 ? 'change-box-color' : ''" v-for="(item,index) in info.changeList" :key="'pe'+index" @tap="toChangeDetail(item.id)">
						<view  class="detail-change">
							<view>批单号：{{item.pd_no ? item.pd_no : item.mborderno}}</view>
							<view class="detail-change-idcard">
							<span v-if="item.state == 0" class="color-info-text">已取消</span>
							<span v-if="item.state == 1" class="color-danger-text">待支付</span>
							<span v-if="item.state == 2" class="color-success-text">已支付</span>
							</view>
						</view>
						<view  class="detail-change">
							<view>合计保费：<span class="change-price-box">￥{{item.total_price}}</span></view>
							<view class="detail-change-idcard">
								<image src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/user-menu-right.png" mode="widthFix" class="user-menu-right"></image>
							</view>
						</view>
					</view>
					<view class="no-data-box" v-if="info.changeList.length == 0">
						暂无数据
					</view>
				</view>
			</view>
			<view class="detail-doc">
				<view class="detail-doc-item" @tap="toRich(5)"  >中国太平洋财产保险股份有限公司雇主责任保险（2022版）条款</view>
				<view class="detail-doc-item" @tap="toRich(6)" >中国太平洋财产保险股份有限公司雇主责任保险（2022版）附加死亡及伤残补助金保险条款</view>
				<view class="detail-doc-item" @tap="toRich(7)" >中国太平洋财产保险股份有限公司雇主责任保险附加法律费用额外增加条款</view>
			</view>
		</view>
		<view v-else class="detail-content-box" >
			<view class="detail-form" >
				<view class="detail-form-label detail-form-label-bg" >死亡/伤残</view>
				<view class="detail-form-content" >
					<rich-text :nodes="info.swsc"></rich-text>
				</view>
			</view>
			<view class="detail-form" >
				<view class="detail-form-label " >医疗费用</view>
				<view class="detail-form-content" >
					<rich-text :nodes="info.ylfy"></rich-text>
				</view>
			</view>
			<view class="detail-form" >
				<view class="detail-form-label detail-form-label-bg" >误工费</view>
				<view class="detail-form-content" >
					<rich-text :nodes="info.wgf.html"></rich-text>
				</view>
			</view>
			<view class="detail-form" >
				<view class="detail-form-label " >法律费用</view>
				<view class="detail-form-content" >
					<rich-text :nodes="info.flfy"></rich-text>
				</view>
			</view>
			<view class="detail-form" >
				<view class="detail-form-label detail-form-label-bg" >赔偿标准</view>
				<view class="detail-form-content" >
					<rich-text :nodes="info.pcbz"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				id : 0,
				load : false,
				info:{
					changeList:[],
				},
				show:1,
				open_arr:[
					{
						open_no:'',
						open_name:'',
						open_user:'',
						open_mobile:'',
						open_address:''
					}
				]
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getData();
			this.getUrl(this.id);
		},
		methods:{
			toBd(url){
				location.href = url;
			},
			getUrl(id){
				this.ajax('user/getData',{
					data:{
						id : id,
					},
					success:(res) => {
						if(res.code)this.getData();
					}
				})
			},
			toRich(type){
				uni.navigateTo({
					url:'/pages/index/rich?type='+type
				})
			},
			toPersion(){
				uni.navigateTo({
					url:'/pages/order/persion?id='+this.id
				})
			},
			toChangeDetail(id){
				uni.navigateTo({
					url:'/pages/order/endorse?id='+id
				})
			},
			changeShow(show){
				this.show = show;
			},
			getData(){
				uni.showLoading({
					title:'加载中'
				})
				this.ajax('user/orderInfo',{
					data:{
						id: this.id,
					},
					success:(res) => {
						uni.hideLoading();
						this.info = res.msg;
						this.load = true;
						
					}
				});
			}
		}
	}
</script>

<style>
	@import url("@/static/css/box/form.css");
	@import url("@/static/css/box/confirm.css");
	@import url("@/static/css/order/detail.css");
</style>
